// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#F56C6C;
$pink: #E65D6E;
$green: #67C23A;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
// base color
$theme: #ed2c2c; //主题色调
$themeHover: #ec3838; //主题色调按钮鼠标经过
$borderColor: #ededed; //边框颜色

/* Color 可以自定义相关配色 */
/* var属性兼容性 $> https://www.caniuse.com/#feat=css-variables */


/* 标准色 */
$orange: #f37b1d;
$taobao: #ff4400;
$olive: #8dc63f;
$cyan: #00d7d7;
$blue: #0081ff;
$purple: #6739b6;
$mauve: #9c26b0;
$pink: #e03997;
$brown: #a5673f;
$grey: #8799a3;
$black: #333333;
$darkGray: #666666;
$gray: #aaaaaa;
$gray2: #999;
$ghostWhite: #f1f1f1;
$white: #ffffff;

/* 浅色 */

$redLight: #fadbd9;
$orangeLight: #fde6d2;
$yellowLight: #fef2ce;
$oliveLight: #e8f4d9;
$greenLight: #d7f0db;
$cyanLight: #d2f1f0;
$blueLight: #cce6ff;
$purpleLight: #e1d7f0;
$mauveLight: #ebd4ef;
$pinkLight: #f9d7ea;
$brownLight: #ede1d9;
$greyLight: #e7ebed;

/* 渐变色 */

$gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
$gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
$gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
$gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
$gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
$gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);

/* 阴影透明色 */

$ShadowSize: 6upx 6upx 8upx;
$redShadow: rgba(204, 69, 59, 0.2);
$orangeShadow: rgba(217, 109, 26, 0.2);
$yellowShadow: rgba(224, 170, 7, 0.2);
$oliveShadow: rgba(124, 173, 55, 0.2);
$greenShadow: rgba(48, 156, 63, 0.2);
$cyanShadow: rgba(28, 187, 180, 0.2);
$blueShadow: rgba(0, 102, 204, 0.2);
$purpleShadow: rgba(88, 48, 156, 0.2);
$mauveShadow: rgba(133, 33, 150, 0.2);
$pinkShadow: rgba(199, 50, 134, 0.2);
$brownShadow: rgba(140, 88, 53, 0.2);
$greyShadow: rgba(114, 130, 138, 0.2);
$grayShadow: rgba(114, 130, 138, 0.2);
$blackShadow: rgba(26, 26, 26, 0.2);

// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951

$menuBg:#304156;
$menuHover:#263445;

$subMenuBg:#1f2d3d;
$subMenuHover:#001528;

$sideBarWidth: 210px;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}
